Navigation bar 主要手機裝置位於螢幕底部固定呈現，通常顯示3~5個item，當需要5個以上、3個以下皆考慮使用Chips 、navigation drawer。

Navigation bar上要放FAB可以右對齊上方，不建議重疊放，因Navigation bar不會水平滾動或移動，如果需要搭配FAB，建議使用Day12 使用 M3 的 Bottom App Bar分享的方式

常使用於手機或平板電腦，在M2中，此元件被命名為bottom navigation，在M3時被被命名Navigation bar。

Material 2 更新 Material 3

實作上探討

API and source code:

• BottomNavigationView
  • Class description
  • Class source

Navigation bar example

1. Using bottom navigation
   • item 透過新增Menu取得設定
   • item 搭配文字顯示設定
2. Adding badges
   • 新增小紅點圖標、新增數字
   • 動態隱藏或是清除數字的判斷、移除小紅點圖標
3. Add item click
   • item點擊選擇：NavigationBarView.OnItemSelectedListener
   • item 是否已重新選擇：bottomNavigation.setOnItemReselectedListener

1. Using bottom navigation

• item 透過新增Menu取得設定：app:menu="@menu/bottom_navigation_menu"

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_menu"
				app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"/>

app:menu="@menu/bottom_navigation_menu"

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search_24"
        android:title="搜尋" />

    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete_outline_24"
        android:title="垃圾桶" />

    <item
        android:id="@+id/archive"
        android:icon="@drawable/ic_archive_24"
        android:title="下載" />
</menu>

• item 搭配文字顯示設定 app:labelVisibilityMode="labeled"
  

• 文字顯示設定方式

  • layout設定 app:labelVisibilityMode = auto
    • auto (default)
    • selected
    • labeled
    • unlabeled
  • 程式碼設定 bottomNavigation.labelVisibilityMode = LABEL_VISIBILITY_AUTO
    • LABEL_VISIBILITY_AUTO (default)
    • LABEL_VISIBILITY_SELECTED
    • LABEL_VISIBILITY_LABELED
    • LABEL_VISIBILITY_UNLABELED
  • 透過程式碼點擊活動狀態：bottomNavigation.selectedItemId = R.id.search

2. Adding badges

圖示右上角的小紅點圖標，可以傳達有關的動態資訊，如計數或狀態。

// 設定顯示小紅點圖標
var badge = bottomNavigation.getOrCreateBadge(menuItemId)
badge.isVisible = true

// 設定小紅點圖標上呈現數字
badge.number = 99

// 需動態隱藏或是清除數字的判斷
val badgeDrawable = bottomNavigation.getBadge(menuItemId)
    if (badgeDrawable != null) {
        badgeDrawable.isVisible = false
        badgeDrawable.clearNumber()
    }

// 移除小紅點圖標
bottomNavigation.removeBadge(menuItemId)

3. Add item click

• item點擊選擇：NavigationBarView.OnItemSelectedListener

  NavigationBarView.OnItemSelectedListener { item ->
     when(item.itemId) {
            R.id.search -> {
              // Respond to navigation item 1 click
               true
            }
            R.id.delete -> {
  	          // Respond to navigation item 2 click
                true
            }
  		      R.id.archive -> {
  					  // Respond to navigation item 2 click
                true
  					}
            else -> false
      }
  }
  

• item 是否已重新選擇：bottomNavigation.setOnItemReselectedListener

  binding.bottomNavigation.setOnItemReselectedListener { item ->
     when(item.itemId) {
         R.id.search -> {}
         R.id.delete -> {}
         R.id.archive -> {}
     }
  }
  

Anatomy and key properties

attributes相關設定

Layout

感謝您看到這邊

參考資料：Material Deaign Navigation Bar